<template>
	<view class="content">
		<canvas id="canvas" type="2d" style="display: inline-block; width: 300px; height: 300px"></canvas>
		<button @tap="init" style="width: 300px">init</button>
		<button @tap="play" style="width: 300px">play</button>
		<button @tap="pause" style="width: 300px">pause</button>
	</view>
</template>

<script>
import lottie from 'lottie-miniprogram';
import obj from '../../static/json/catrim.js';
export default {
	data() {
		return {
			ani: null
		};
	},
	methods: {
		init() {
			uni.createSelectorQuery()
				.select('#canvas')
				.node((res) => {
					const canvas = res.node;
					const context = canvas.getContext('2d');

					canvas.width = 300;
					canvas.height = 300;

					lottie.setup(canvas);
					this.ani = lottie.loadAnimation({
						loop: true,
						autoplay: true,
						// assetsPath: '/json/catrim.js',
						animationData: obj,
						rendererSettings: {
							context
						}
					});
				})
				.exec();
		},
		play() {
			this.ani.play();
		},
		pause() {
			this.ani.pause();
		}
	},
	beforeDestroy() {
		this.pause();
	}
};
</script>

<style></style>
